<template>
  <div class="hos_page">
    <user-card :islogin="true" :isbind="true" style="margin-bottom: 0.8125rem"></user-card>

    <div class="cus_select" @click="dmsfun">
      <img src="@/assets/img/calendar@2x.png" alt=""
           style="width: 1.0625rem; height: 0.9375rem; margin-right: 0.3125rem"/>
      <div>{{ value }}</div>
      <img src="@/assets/img/drop.png" alt="" style="width: 0.6875rem; height: 0.4375rem"/>
    </div>
    <template v-if="noData">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>无数据</div>
      </div>
    </template>
    <template v-else>
      <!-- <div class="bill_box" @click="godetail(item)">
        <img src="@/assets/img/right.png" alt="" class="bill_box_img" v-if="item.ynsee == '1'">
        <div class="bill_box_2">
          <div class="left">
            <div>{{ item.diagname }}</div>
            <div>{{ item.deptname }} {{ item.decpname }}</div>
            <div>挂号时间：{{ item.regDate }}
              <div class="isLook" v-if="item.ynsee == '1'">{{ item.ynsee == '1' ? "已看诊" : "未看诊" }}</div>
              <div class="isNoLook" v-else>{{ item.ynsee == '1' ? "已看诊" : "未看诊" }}</div>
            </div>
          </div>
        </div>
      </div> -->
      <div class="billBox">
        <div class="bill_box" @click="godetail(item)" v-for="item in outList">
          <img src="@/assets/img/right.png" alt="" class="bill_box_img">
          <div class="bill_box_1">
            <div>{{ item.diagname }}</div>
            <div v-if="item.ynsee == '1'" style="color: green">已看诊</div>
            <div v-if="item.ynsee == '0'" style="color: red">未看诊</div>
            <!-- <div style="color: green" v-if="item.orderStatus == '1'">已支付</div>
          <div style="color: red" v-if="item.orderStatus == '2'">已退款</div>
          <div style="color: red" v-if="item.orderStatus == '0'">待支付</div> -->
          </div>
          <div class="bill_box_2">
            <div class="left">
              <div>科室：{{ item.deptname }}</div>
              <div style="font-size: 0.875rem">医生：{{ item.decpname }}</div>
              <div style="font-size: 0.875rem;">
                挂号类型:{{ item.pactName }}
              </div>
              <div>挂号时间：{{ item.regDate }}</div>
            </div>
            <!-- <div class="paybtn"  v-if="item.orderStatus == '0'" @click.stop="goPay(item.orderId)">支付</div> -->
          </div>
        </div>
      </div>
      <!-- <div class="line" v-if="index != outList.length"></div> -->
    </template>

    <div class="date_mask" v-if="dateMaskShow">
      <div class="date_mask_ul">
        <div class="date_mask_li" v-for="(date, index) in datelist" @click="dateClick($event, date)"
             :style="{ color: date.selected == true ? '#448EFF' : '#3F4551' }" :data-idx="index">
          {{ date.name }}
        </div>
        <div class="date_mask_li" @click="dmsfun">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";
import {Tab, TabItem} from "vux";
import {getOutpatientClinicCode, payCreate} from "@/api/api";

import {removeToken, getWxUserinfoCookies, removeWxUserinfoCookies} from "@/api/auth";

export default {
  components: {
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      noData: true,
      tabItemShow: "0",
      dateMaskShow: false,
      value: "一周内",
      y: "",
      m: "",
      d: "",
      EndDate: "",
      BeginDate: "",
      outList: [],
      datelist: [
        {value: 0, name: "一周内", selected: false},
        {value: 0, name: "一月内", selected: false},
        {value: 0, name: "三月内", selected: false},
        {value: 0, name: "一年内", selected: false},
        {value: 0, name: "更早", selected: false},
      ],
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      console.log("userInfo");
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }

    this.getToday();
    if (window.localStorage.getItem("outIdx")) {
      var idx = JSON.parse(window.localStorage.getItem("outIdx"));
      this.datelist[idx].selected = true;
      this.changeDay(this.datelist[idx].name);
      this.value = this.datelist[idx].name;
    } else {
      this.getOutpatientClinicCode();
    }

  },
  methods: {
    // 获取患者住院列表
    getOutpatientClinicCode() {
      var data = {
        name: this.userInfo.name,
        beginDate: this.EndDate,
        endDate: this.BeginDate,
        idcardNo: this.userInfo.idNo,
        idcardType: "",
        cardNo: "",
        operMobile: this.userInfo.mobile,
      };
      getOutpatientClinicCode(data).then((res) => {
        if (res.code == 200) {
          this.outList = [];
          if (res.data.patientlist instanceof Array) {
            this.outList = res.data.patientlist;
          } else {
            this.outList.push(res.data.patientlist);
          }

          if (this.outList.length > 0) {
            this.noData = false;
          }
        }
      });
    },
    goPay(orderId) {
      // 获取微信配置
      this.payCreate(orderId);
    },
    getLocalOpenId() {
      try {
        var user = JSON.parse(getWxUserinfoCookies());
        if (user && user.openid.trim().length > 0) {
          return user.openid;
        } else {
          console.log("getWxUserinfoCookies 未获取到微信openid");
        }
      } catch (err) {
        console.log(err)
        var openId = window.localStorage.getItem("openId");
        return openId;
      }
    },
    payCreate(orderId) {
      const that = this;
      payCreate({
        orderType: "2",
        orderId,
        openId: this.getLocalOpenId(),
      }).then((res) => {
        if (res.code == 200) {
          // 调起微信支付
          that.wxPay(res.data);
        } else {
          alert(res.message);
          if (res.code == 1355) {
            that.$router.push({
              name: "outpatient_payment",
            });
          }
        }
      });
    },
    // 发起微信支付
    wxPay(data) {
      const that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: data.appId, //公众号名称，由商户传入
          timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: data.nonceStr, //随机串
          package: data.package,
          signType: data.signType, //微信签名方式：
          paySign: data.paySign, //微信签名
        },
        function (response) {
          //TODO 应该再进行一次查单验证来保证支付成功
          if (response.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
            setTimeout(() => {
              that.$router.push("/outpatient_payment");
            }, 1000);
          } else {
            that.$vux.toast.show("支付失败");
            that.$router.push("/outpatient_payment");
          }
        }
      );
    },
    // 跳转缴费详情
    godetail(item) {
      if (item.ynsee != '0') {
        this.$router.push({
          path: "/outpatient_records_detail",
          query: {
            clinicCode: item.clinicCode,
            visitDate: item.regDate,
            patientIdcardNo: item.idenno,
            patientName: item.name,
            cardNo: item.cardNo,
            diagName: item.diagname,
          },
        });
      }
    },
    dmsfun() {
      this.dateMaskShow = !this.dateMaskShow;
    },
    dateClick(e, date) {
      console.log(e.currentTarget.dataset.idx);
      var idx = e.currentTarget.dataset.idx;
      this.dmsfun();
      (this.value = date.name),
        this.datelist.forEach((element) => {
          console.log(element);
          element.selected = false;
        });
      this.datelist[idx].selected = true;
      console.log(this.datelist);
      this.changeDay(date.name);
      window.localStorage.setItem("outIdx", idx)
    },
    getToday() {
      var today = new Date();
      var yy = today.getFullYear();
      var mm = today.getMonth() + 1;
      var dd = today.getDate();
      this.BeginDate =
        yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + (dd < 10 ? "0" + dd : dd);
      //
      var nowdate = new Date();
      var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
      this.y = oneweekdate.getFullYear();
      this.m = oneweekdate.getMonth() + 1;
      this.d = oneweekdate.getDate();
      this.EndDate =
        this.y +
        "-" +
        (this.m < 10 ? "0" + this.m : this.m) +
        "-" +
        (this.d < 10 ? "0" + this.d : this.d);
    },
    changeDay(name) {
      console.log(name);
      var nowdate = new Date();
      if (name == "一周内") {
        var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
        this.y = oneweekdate.getFullYear();
        this.m = oneweekdate.getMonth() + 1;
        this.d = oneweekdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一月内") {
        nowdate.setMonth(nowdate.getMonth() - 1);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "三月内") {
        nowdate.setMonth(nowdate.getMonth() - 3);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一年内") {
        nowdate.setMonth(nowdate.getMonth() - 12);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "更早") {
        this.EndDate = "2010-01-01";
      }
      this.getOutpatientClinicCode();
    },
    getAge(strBirthday) {
      var returnAge;

      var strBirthdayArr = strBirthday.split("-");

      var birthYear = strBirthdayArr[0];

      var birthMonth = strBirthdayArr[1];

      var birthDay = strBirthdayArr[2];

      var d = new Date();

      var nowYear = d.getFullYear();

      var nowMonth = d.getMonth() + 1;

      var nowDay = d.getDate();

      if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0岁
      } else {
        var ageDiff = nowYear - birthYear; //年之差

        if (ageDiff > 0) {
          if (nowMonth == birthMonth) {
            var dayDiff = nowDay - birthDay; //日之差

            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            var monthDiff = nowMonth - birthMonth; //月之差

            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
        }
      }

      return returnAge; //返回周岁年龄
    },
  },
  destroyed() {
  },
};
</script>
<style scoped>
.hos_page {
  min-height: 100vh;
  overflow: hidden;
}

.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.cus_select {
  padding: 0px 1rem;
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.cus_select img {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.cus_select div {
  width: calc(100% - 2.75rem);
  background-color: #f7fafd;
}

.date_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.date_mask_ul {
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* height: 18.75rem; */
  width: 100%;
  background-color: #ffffff;
}

.date_mask_li {
  width: 100%;
  height: 3.125rem;
  border-bottom: 0.0625rem solid #eee;
  line-height: 50px;
  text-align: center;
  font-size: 0.9375rem;
  color: #3f4551;
}

.date_mask_li:last-of-type {
  background-color: #f1f5f9;
}

.billBox {
  height: calc(100vh - 7.75rem);
  overflow-y: scroll;
  background: #f4f8fc;
  /* padding: 1rem 0; */
}

.bill_box {
  margin: 0.75rem 1rem;
  padding: 0px 1rem;
  width: calc(100% - 4rem);
  height: 9.375rem;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(174, 206, 254, 0.24);
  border-radius: 0.375rem;
  position: relative;
}

.bill_box .bill_box_1 {
  height: 2.8125rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e7ecf5;
}

.bill_box .bill_box_2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill_box .bill_box_2 .left {
  width: calc(100% - 6.25rem);
  height: 5.625rem;
  display: flex;
  /* align-items: center; */
  justify-content: space-around;
  flex-flow: column;
}

.bill_box .bill_box_2 .left > div:nth-of-type(2) {
  /* font-size: 0.875rem; */
}

.bill_box .bill_box_2 .left > div:nth-of-type(4) {
  font-size: 0.75rem;
  color: #a4adbe;
}

.bill_box .bill_box_2 .paybtn {
  width: 3.4375rem;
  height: 1.875rem;
  border: 1px solid #448eff;
  border-radius: 3px;
  color: #448eff;
  text-align: center;
  line-height: 1.875rem;
}

.bill_box_img {
  width: 0.5rem;
  height: 0.8125rem;
  position: absolute;
  top: calc((100% - 0.8125rem) / 2);
  right: 1rem;
}

.isLook {
  font-size: 0.9375rem;
  color: green;
}

.isNoLook {
  font-size: 0.9375rem;
  color: red;
}

.bill_box .bill_box_2 .paybtn {
  width: 3.4375rem;
  height: 1.875rem;
  border: 1px solid #448eff;
  border-radius: 3px;
  color: #448eff;
  text-align: center;
  line-height: 1.875rem;
}

.line {
  margin: 0 1rem;
  width: calc(100% - 2rem);
  height: 1px;
  background: #e7ecf5;
}


.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
